<@admin.header title="联系人分组列表">
<@common.zTree/>

<script type="text/javascript">
    App.ns('ContactGroup');
    
    var menuTree;
    var maxLevel = 100;
    
    function onDrop(treeId, orgins, target, moveType){
        if (!orgins || orgins.length < 1) {
            alert('没有选中结点');
            return false;
        }
        var orgin = orgins[0];
        var msg = "";
        var pid = "";
        var orderNo = orgin["orderno"] || 0;
        if (target) {
            var tp = target.getParentNode();
            if (tp) {
                console.log(tp)
            }
            if (target.id == orgin.pid) {
                alert('已经在此菜单下');
                return false;
            }
            pid = target.id;
            msg = "确认将菜单 <" + orgin.name + "> 移动到菜单 <" + target.name + "> 下? 确定将完成移动";
            
        }
        else {
            msg = "确认将菜单 <" + orgin.name + "> 作为一级菜单?";
        }
        if (confirm(msg)) {
            $.ajax({
                type: "post",
                data: {
                    "id": orgin.id,
                    "pid": pid
                },
                url: '${base}/contactgroup/changeParent.do',
                success: function(data){
                    if (data && data.success) {
                        App.Msg.alert("操作成功!");
                    }
                }
            });
            return true;
        }
        else {
            return false;
        }
    }
    
    /**
     * @deprecated
     * @param {Object} id
     */
    function addChildNode(id){
        if (menuTree) {
            var node = menuTree.getNodeByTId("menuTree_" + id);
            if (node && node.level > 0) {
                App.Msg.alert("无法为二级菜单添加子菜单(限定只允许添加两级菜单)");
                return;
            }
        }
        //window.location.href="add.do?pid="+id;
    }
    
    function onRemove(treeId, treeNode){
        if (confirm('确认删除当前菜单?')) {
            var url = "${base}/contactgroup/delete.do";
            $.ajax({
                type: "post",
                data: {
                    'ids': treeNode.id
                },
                url: url,
                success: function(data){
                    if (data && data.success) {
                        App.Msg.alert(data.message);
                    }
                    window.location.reload();
                }
            });
            
        }
        else {
            return false;
        }
    }
    
    
    var setting = {
        edit: {
            enable: true,
            showRemoveBtn: true,
            showRenameBtn: false
        },
        callback: {
            beforeDrop: onDrop,
            beforeRemove: onRemove,
            onClick: function(event, treeId, treeNode){
                App.network.Ajax.post('${base}/contactgroup/selectedContacts.do', {
                    'groupId': treeNode.id
                }, function(re){
                    fillOptions('secondList', re.root);
                });
            }
        },
        view: {
            addDiyDom: function(treeId, treeNode){
                var obj = $("#" + treeNode.tId + "_a");
                var editStr = "<span style='font-size:12px;'>";
                if (treeNode.level < (maxLevel - 1)) {
                    editStr += "<a href='add.do?pid=" + treeNode.id + "'>添加子菜单</a>";
                }
                editStr += "<a href='edit.do?id=" + treeNode.id + "'>修改</a>";
                editStr += "<a href='selectContacts.do?groupId=" + treeNode.id + "'>关联联系人</a>";
                editStr += "</span>";
                obj.after(editStr);
            }
        },
        async: {
            enable: true,
            rootKey: 'root',
            url: "tree.do"
        }
    };
    
    function GetData(){
        var searchText = $('#searchText').val();
        var url = "${base}/contactgroup/tree.do";
        $.ajax({
            type: "post",
            data: {
                'searchText': searchText
            },
            url: url,
            success: function(data){
                if (data && data.success) {
                    menuTree = $.fn.zTree.init($("#menuTree"), setting, data.root);
                    menuTree.expandAll(true);
                }
            }
        });
    }
    
    function fillOptions(selector, array){
        var $target = $('#' + selector);
        $target.empty();
        if (App.isEmpty(array)) {
            $('#selectedField').hide();
        }
        else {
            $('#selectedField').show();
        }
        App.each(array, function(e){
            var $option = $('<option></option>');
            $target.append($('<option>', {
                value: e.tel || '',
                text: String.format('{0}({1})', e.name || '', e.tel || '')
            }));
        });
    }
    
    function searchFirstList(inputVal, searchArea){
        var allCells = $(searchArea).find('option');
        if (allCells.length > 0) {
            var found = false;
            allCells.each(function(index, option){
                var regExp = new RegExp(inputVal, 'i');
                if (regExp.test($(option).text())) {
                    $(option).show();
					 var opt = $(option).find('span').show();
					$(option).replaceWith(opt)
                }
                else {
                    $(option).wrap('<span>').hide();
                }
            });
        }
    }
    
    $(document).ready(function(){
    
    
        ContactGroup.form = new App.common.Form({
            base: '${base}/contactgroup'
        });
        
        
        ContactGroup.search = function(){
            $('#searchForm').submit();
        }
        
        ContactGroup.del = function(ids){
            ContactGroup.form.deleteRecord(ids);
        }
        
        $('#secondFilterSearch').keyup(function(){
            var searchArea = $('#secondList');
            searchFirstList($(this).val(), searchArea);
        });
        GetData();
    });
</script>
</@admin.header>
<body>
    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="list.do">系统菜单管理管理</a>
            </li>
            <li>
                <a href="#">系统菜单管理列表</a>
            </li>
        </ul>
    </div>
    <div class="rightinfo">
        <!--默认查询表单-->
        <div class="tools">
            <input type="hidden" name="pageNo" value="1"/>
            <ul class="toolbar">
                <li class="click">
                    <a href="add.do"><span><img src="${base}/resources/images/t01.png" /></span>添加</a>
                </li>
                <li style="padding:0 0">
                    <span style="margin:0px 5px">关键字</span>
                    <input id="searchText" name="searchText" type="text" class="dfinput" onkeypress="if(event.keyCode==13){$(this).blur();GetData();return false;}" style="width:160px;"/>&nbsp;
                </li>
                <li>
                    <a href="javascript:GetData()"><span><img src="${base}/resources/images/search24.png" /></span>查找</a>
                </li>
            </ul>
        </div>
    </div><!-- Definition of context menu -->
    <div id="treeDiv" style="width:380px;margin:20px 20px;border:1px dashed #000;float:left;">
        <span id="msg"></span>
        <br/>
        <br/>
        <ul id="menuTree" class="ztree">
        </ul>
        <br/>
        <br/>
        <br/>
    </div>
    <style>
        .selectBox {
            float: left;
            width: 340px;
            margin: 20px 20px;
            padding: 5px 5px;
            border: 1px dashed #000;
            display: none;
        }
        
        .selectBox select {
            border: 1px solid #000;
            padding: 5px 5px;
            margin: 10px 10px;
        }
        
        .selectBox input {
            border: 1px solid #000;
        }
    </style>
    <div class="selectBox" id="selectedField">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td width="100%">
                    <table cellpadding="0" id="tbl_format"cellspacing="0" border="0" width="100%" class="standard_table_v4">
                        <thead>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <select id="secondList" multiple="multiple" style="height:380px;width: 300px;">
                                    </select>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
